{% load static %}

{#https://blog.csdn.net/u011280778/article/details/94722310#}
<div class="container my-4">

    <input name="good" id="uploadImg" class="file" type="file" multiple data-preview-file-type="any"
           data-upload-url="{% url 'SaveUpload' CategoryItemQuery.id %}" data-theme="fas">

</div>


<!-- language:"zh"需要引入指定的js文件，uploadUrl,在预览图片时多上传和删除的小图标 -->
<script type="text/javascript">
    initFileInput();

    function initFileInput() {
        $("#uploadImg").fileinput({
            language: 'zh',
            dropZoneTitle: '保存文件到 {{ parent_Category_name }}>>{{ Category_name }}分类',
            showUpload: true,
            {#uploadUrl: "/...",#}
            browseClass: "btn btn-primary",
            //allowedFileExtensions: ['jpg', 'png', 'gif', 'zip', 'rar', 'jpeg',]
            dropZoneEnabled: true,//是否显示拖拽区域
            minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
            maxFileCount: 0, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件类型时，将在每个预览文件缩略图中显示的图标。默认为<i class="glyphicon glyphicon-file"></i>
            layoutTemplates: {
                actionUpload: '',    //去除上传预览缩略图中的上传图片
                actionZoom: '',      //去除上传预览缩略图中的查看详情预览的缩略图标
                actionDownload: '',  //去除上传预览缩略图中的下载图标
                actionDelete: '',    //去除上传预览的缩略图中的删除图标
            },//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
        }).on("filebatchselected", function (event, data) {
            var fileDir = $("#uploadImg").val();
            var suffix = fileDir.substr(fileDir.lastIndexOf("."));

        }).on("fileuploaded", function (event, data) {
            console.log(event);
            console.log(data);
            if(data.response.code === 200){
                var item = data.response.data;
                console.log(item);
                $("#listFileUL").prepend('<li id="item"'+item.id+'><div style="display: inline-block;width:30px;height:30px;"><img style="width: auto;height: 100%" src="/static/admin/img/shouhui1-icons.svg"></div><span><a style="" rel="/media/'+item.file+'" href="/media/'+item.file+'"> '+item.fileName+' ：更新时间：'+item.date+' </a></span><span><button style="background-color: yellow"><a style="" rel="/media/'+item.file+'" href="/media/'+item.file+'" download="">下载</a></button></span>      </li>');
            }

        })

    }
</script>